<template>
	<block v-if="data.is_bind">
		<view class="container" style="filter: grayscale(100%);">
			<image :src="data.image" class="container_image" mode=""></image>
			<view class="container_name">
				<view style="color: #999;">
					{{data.name}}
				</view>
				<view class="menu_item_device" style="font-size: 24rpx;color: #ccc;">
					设备已绑定
				</view>
			</view>
		</view>
	</block>

	<block v-else>
		<view class="container" @click="onSearch">
			<image :src="data.image" class="container_image" mode=""></image>
			<view class="container_name">
				<view class="">
					{{data.name}}
				</view>
				<view class="menu_item_device" style="font-size: 24rpx;color: #ccc;">
					<rui-icons icon="ble-full" size="28"></rui-icons> {{data.device_id}}
				</view>
			</view>
			<rui-icons icon="more" color="var(--gray)"></rui-icons>
		</view>
		
	</block>

	<rui-popup ref="popup">
		<!-- <rui-popup-item :data="data.color" @change="change"></rui-popup-item> -->

		<view class="menu">
			<view class="menu_item" v-for="(item, index) in data.color" :key="index" @click="change(item)">
				<image :src="item.image" class="menu_item_img"></image>
				<view class="menu_item_name">
					{{item.name}}
				</view>
			</view>
		</view>

	</rui-popup>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import cache from "@/util/cache.js";

	let props = defineProps({
		data: Object
	})

	let popup = ref(null);

	const onSearch = () => {
		popup.value.open()
	}
	const change = e => {
		let params = {
			product_id: props.data.id,
			product_color_id: e.id,
			image: e.image,
			mac: props.data.mac,
			device_id: props.data.device_id
		}
		console.log(e, params)
		cache.put('ProductInfo', params, 60 * 60)
		uni.$rui.route('/pages/bluetooth/create/create')
		popup.value.close()
	}
</script>

<style lang="scss" scoped>
	.menu {
		&_item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f5f6f7;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			&_img {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
			}

			&:active {
				background: #f5f6f7;
			}

			&:last-child {
				border-bottom: none;
			}
		}

	}

	.container {
		margin: 20rpx;
		padding: 30rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;

		&_image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 20rpx;
		}

		&_name {
			width: calc(100% - 150rpx);
		}
	}
</style>